<template>
  <el-form
    ref="formRef1"
    :model="formInline"
    :rules="rules"
    class="form-inline1"
    label-width="auto"
    label-position="top"
    :disabled="isDisabled"
  >
    <el-form-item
      v-for="(item, index) in form1"
      :key="index"
      :label="item.label"
      :prop="item.prop"
    >
      <!-- input -->
      <el-input
        v-if="item.type === 'input'"
        v-model="formInline[item.prop]"
        placeholder="请输入"
        :disabled="item.isDisabled"
        clearable
      />
      <!-- select -->
      <el-select
        v-if="item.type === 'select'"
        v-model="formInline[item.prop]"
        :filterable="item.isSearch"
        placeholder="请选择"
      >
        <el-option
          v-for="j in item.options"
          :key="j.value"
          :label="j.label"
          :value="j.value"
        />
      </el-select>

      <!-- textarea -->
      <el-input
        v-if="item.type === 'textarea'"
        v-model="formInline[item.prop]"
        placeholder="请输入"
        :rows="4"
        type="textarea"
        clearable
      />

      <!-- date -->
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="formInline[item.prop]"
        type="date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        clearable
        style="width: 100%"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
  import {
    ref,
    reactive,
    defineExpose,
    defineProps,
    withDefaults,
    onMounted,
    watch,
  } from 'vue'
  import { form1 } from '../table/column'
  import { getSimpleDeptList } from '@/api/system/dept'
  import { getSimpleUserList } from '@/api/system/user/index'
  import { useAchievementAwardStore } from '@/store/modules/achievementAward'
  import { useDictStore } from '@/store/modules/dict'
  import { storeToRefs } from 'pinia'

  const dictStore = useDictStore()
  const props = defineProps({
    isDisabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    isUpdate: {
      type: Boolean,
      default: false,
      required: false,
    },
  })

  const formRef1 = ref()
  const formInline = ref({})
  const rules = reactive({})
  const store = useAchievementAwardStore()
  const { setDeptList, setUserList, addForm } = store
  const { allForm } = storeToRefs(store)
  form1.value.forEach((item) => {
    if (item.prop == 'recommendLevel' || item.prop == 'preReviewLevel') {
      item.options = dictStore.getDictType('recommend_level')
    }
  })
  const getOptionList = () => {
    getSimpleDeptList().then((res) => {
      const list = []
      form1.value.forEach((item) => {
        if (item.prop === 'recommendUnit') {
          res.data.forEach((j) => {
            item.options.push({
              label: j.name,
              value: j.id,
            })

            list.push({
              label: j.name,
              value: j.id,
            })
          })
        }
      })
      setDeptList(list)
    })
    getSimpleUserList().then((res) => {
      const list = []
      form1.value.forEach((item) => {
        if (item.prop === 'recommendPersonName') {
          res.data.forEach((j) => {
            item.options.push({
              label: j.nickname,
              value: j.id,
            })
            list.push({
              label: j.nickname,
              value: j.id,
            })
          })
        }
      })
      setUserList(list)
    })
  }
  watch(
    () => props.isUpdate,
    (val) => {
      for (const key in allForm.value) {
        formInline.value[key] = allForm.value[key]
      }
    }
  )

  onMounted(() => {
    getOptionList()
  })

  const submit = async () => {
    await formRef1.value.validate((valid) => {
      if (valid) {
        addForm(formInline.value)
      } else {
        console.log('error submit!!')
        return false
      }
    })
  }
  defineExpose({
    submit,
  })
</script>

<style scoped lang="scss">
  .form-inline1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 16px;
    grid-column-gap: 20px;

    .el-input {
      // --el-input-width: 323px;
    }

    .el-select {
      // --el-select-width: 323px;
    }

    :deep(.el-form-item__label) {
      padding: 0 5px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 0px;
      margin-bottom: 0px;
    }
  }
</style>
